<template>
  <el-dialog title="文件下载" class="dialogDownload" :visible.sync="dialog">
    <el-progress type="circle" :percentage="Percentage"></el-progress>
  </el-dialog>
</template>

<script>
  import service from '@/util/service'
  import link from '@/api/Link'
  import apiUrl from '@/api/url'
  export default {
    name: "DownloadFile",
    props: ['ids', 'downloadOpen', 'folderIds'],
    data () {
      return {
        dialog: false,
        Percentage: 0,
      }
    },

    methods: {
      //获取下载进度
      schedule (e) {
        this.Percentage = e.progress.toFixed(2) * 100;
      },
      //文件下载
      async fileDownload (callback, ids, folderIds) {
        this.$message({
          message: "开始下载",
          type: "success",
        });
        this.dialogDownload = true
        let data = {
          fileIds: ids,
          folderIds: folderIds
        }
        await service.request({
          url: apiUrl.baseUrl + '/sys/file/batchDownload/v1',
          method: "POST",
          data: JSON.stringify(data),
          responseType: 'blob',
          //下载进度
          onDownloadProgress: function (e) {
            if (callback) {
              //回调
              callback(e)
            }
          }
        }).then(res => {
          let fileName = res.headers['content-disposition'].split('=')[1]
          const url = window.URL.createObjectURL(new Blob([res.data]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
        })

        this.$message({
          message: "下载完成",
          type: "success",
        });

      },

    },

    watch: {
      downloadOpen (curVal, oldVal) {
        this.dialog = true
        this.fileDownload(this.schedule, this.ids, this.folderIds)
      },
      dialog (curVal, oldVal) {
        if (!curVal) {
          this.Percentage = 0
        }
      },
    },

  };
</script>

<style scoped>

</style>